<template>
    <div>
      <Nav></Nav>
      <Nav2></Nav2>
      <div class="y-con">
        <p>您的当前位置： 首页  >  全部商品  >  苹果  >  阿克苏</p>
        <div class="y-d1">
          <div class="y-d1-left">
            <span>排序:</span>
            <span @click="bians(index)" :class="{act2:cur8==index}" class="d2" v-for="(item,index) in data">{{item}}</span>
          </div>
          <div class="y-d1-right">
            <span>筛选:</span>
            <span @click="bians2(index)" :class="{act3:cur9==index}" class="d3" v-for="(item,index) in data2">{{item}}</span>
          </div>
        </div>
        <component :is="com2"></component>
        <div class="pagesion">
          <span :class="{act2:curss2==1}" class="nest"> < </span>
          <span :class="{act1:curss==index}" @click="bian(index)" v-for="(item,index) in data4">{{item}}</span>
          <span :class="{act2:curss2==6}" class="nest"> > </span>
          <input ref="modes" type="number" v-model="vals">
          <span @click="tiao()" class="last">跳转</span>
        </div>
      </div>


      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Nav2 from '../com/Nav2'
  import Footer from '../com/Footer'
  import Show0 from './Show0'
  import Show1 from './Show1'
  import Show2 from './Show2'
  import Show3 from './Show3'
  import Show4 from './Show4'
  import Show5 from './Show5'
    export default {
      name: "Serchyou",
      data(){
        return {
          data:['销量','价格','评分最高'],
          data2:['全国','次日达'],
          cur8:0,
          cur9:0,
          vals:'',
          curss:0,
          curss2:1,
          com2:'Show0',
          data4:[1,2,3,4,5,6]
        }
      },
      methods:{
        bians(i){
          this.cur8 = i;
        },
        bians2(i){
          this.cur9 = i;
        },
        bian(i){
          this.curss = i;
          this.curss2 = i+1;
          this.com2 = 'Show'+i;
        },
        tiao(){
          this.com2 = 'Show'+(this.vals-1);
          this.curss = this.vals-1;
          this.curss2 = this.vals;
          this.vals = '';
        }
      },
      components:{
        Nav,
        Nav2,
        Footer,
        Show0,
        Show1,
        Show2,
        Show3,
        Show4,
        Show5
      }
    }
</script>

<style scoped>
  .y-con{
    width: 1280px;
    margin: auto;
  }
  .y-con p{
    background: #f4f4f4;
    font-size: 14px;
    color: #666;
    padding: 20px;
    margin: 20px 0;
  }
  .y-d1{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
  }
  .y-d1 span{
    font-size: 16px;
  }
  .y-d1 .y-d1-left span{
    margin-right: 40px;
  }
  .y-d1 .y-d1-left .d2{
    padding: 3px 16px;
    border: 1px solid #e9e9e9;
    cursor: pointer;
  }
  .y-d1 .y-d1-left .act2{
    border: 1px solid #498e3d;
    color: #498e3d;
  }
  .y-d1 .y-d1-right span{
    margin-left: 40px;
  }
  .y-d1 .y-d1-right .d3{
    padding: 3px 16px;
    background: #dedede;
    cursor: pointer;
  }
  .y-d1 .y-d1-right .act3{
    background: #498e3d;
    color: #fff;
  }
  .pagesion{
    text-align: center;
    padding: 20px 0 40px;
  }
  .pagesion span{
    display: inline-block;
    font-size: 22px;
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 30px;
    cursor: pointer;
  }
  .pagesion input{
    width: 50px;
    height: 30px;
    border: 1px solid #ddd;
    margin-left: 30px;
    vertical-align: top;
    text-align: center;
  }
  .pagesion .nest{
    background: #498e3d;
    color: #fff;
  }
  .pagesion .last{
    background: #f08200;
    color: #fff;
    font-size: 16px;
  }
  .pagesion .act1{
    background: #498e3d;
    color: #fff;
  }
  .pagesion .act2{
    background: #ddd;
  }
</style>
